<template>
  <view class="container-wrap">
    <uni-nav-bar fixed shadow :border="false" :title="props.title" left-icon="left" @clickLeft="onClickLeft" @clickRight="() => { showPopover = true }" v-if="props.title">
      <template #bottom>
        <uni-search-bar @confirm="searchList" v-model="name" placeholder="请输入搜索关键词" @clear="() => { name = ''; searchList() }" @cancel="searchList" cancelButton="none" :radius="20"></uni-search-bar>
      </template>
    </uni-nav-bar>
    <view class="top-wrap active" v-else>
      <uni-search-bar @confirm="searchList" v-model="name" placeholder="请输入搜索关键词" @clear="() => { name = ''; searchList() }" @cancel="searchList" cancelButton="none" :radius="20"></uni-search-bar>
    </view>
    <view class="list-wrap common-wrap">
      <van-list v-model="listLoading" :finished="listFinished" finished-text="没有更多了" @load="loadMore">
        <exam-list-item :list="list" vertical></exam-list-item>
      </van-list>
    </view>
  </view>
</template>
<script setup>
import {ref, onMounted, watch, computed, getCurrentInstance} from 'vue';
const {$uniPush, $toast} = getCurrentInstance().proxy;
import ExamListItem from '@/components/exam/listItem.vue';
import VanList from "@/components/vant/van-list/van-list.vue";
import VanCell from "@/components/vant/van-cell/van-cell.vue";
import VanPopup from "@/components/vant/van-popup/van-popup.vue";
import VanTag from "@/components/vant/van-tag/van-tag.vue";
import DataEmpty from "@/components/common/DataEmpty.vue";
import mockData from "@/mock/index/configData.json"


const name = ref(''); // 1
const page = ref({
  pageNumber: 1,
  pageSize: 10,
});
const list = ref([]); // 课程列表
const listLoading = ref(false);
const listFinished = ref(false);
const show = ref(false);
const showTime = ref(false);
const date = ref('');
const showPopover = ref(false);

onMounted(()=>{
  getList();
})
const props = defineProps({
  title: {
    type: String,
    default: '',
  }
})

const userPhoto = computed(() => {
  return user.value?.photoHttpUrl?.length > 0 ? user.value?.photoHttpUrl : ''
})
const onClickLeft = () => {
  uni.navigateBack({ delta: 1 });
};


const searchList = () => {
  uni.showToast({
  	title:"该功能需自己实现",
	icon:"none"
  })
};

const getList = (loadNew = false) => {
	if(loadNew) return;
	list.value = list.value.concat(mockData.examData);
	listFinished.value = true;
};

const noMoreState = (res) => {
  if (res.totalPage <= page.value.pageNumber || (res.list && res.list.length === 0)) {
    listFinished.value = true;
  } else {
    page.value.pageNumber++;
  }
};

const loadMore = () => {
  if (!listFinished.value) getList();
};

</script>

<style lang="scss" scoped>
	.van-nav-bar.van-hairline--bottom::after {
		display: none;
	}

	.view-chart {
		height: 260px;
	}

	.user-photo {
		position: relative;
		z-index: 3;
		width: fit-content;
		height: fit-content;
		border-radius: 50%;
		margin-right: 15px;
		border: 2px solid #fff;

		image {
			width: 52px;
			height: 52px;
			border-radius: 50%;
		}
	}

	.right-input {
		width: 70%;
		height: 40px;
		padding: 0 8px;
		background: #F6F6F6;
		border-radius: 4px;
		text-align: center;
		line-height: 30px;
		transition: all .3s ease;

		.input-box {
			text-align: left;
			display: flex;
			flex: 1;
			align-items: center;

			.input {
				width: 100%;
				height: 40px;
				font-size: 14px;
				background: #F6F6F6;
				border-radius: 4px;
				line-height: 30px;
				border: none;
				text-align: left;
				text-indent: 10px;

				&::placeholder {
					font-size: 14px;
				}
			}
		}

	}

	.icon-a-1xuexitongji {
		font-size: 16px !important;
		color: var(--color);
		line-height: 12px !important;
	}

	 :deep(.qy-com-learn-course) {
		padding-top: 50px;

		.search-bar {
			padding: 0;
		}

		.van-search {
			padding-top: 0;
		}

		.font-btn {
			margin-top: 8px !important;
		}
	}

	.container-wrap {
		position: relative;
	}

	.top-wrap {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 100;
		background: #fff;

		.van-nav-bar {
			&+.van-search {
				padding-top: 0;
			}
		}

		&.active {
			position: absolute;
			padding: 5px 0;

			&+.list-wrap {
				padding-top: 50px;
				height: calc(100vh - 235px);
			}
		}
	}

	.list-wrap {
		padding-top: 66px;
		overflow: auto;
		height: calc(100vh - var(--status-bar-height) - 56px);
	}
</style>